在前面章節我們介紹過 純 CSS, CSS in JS 那接下來我們要來介紹 utility CSS。什麼是 utility CSS 就如其意思,他是以功能為優先的 CSS,像是如果大家有用過 bootstrap 或是 bulma 等 css library 其實 utility-first 就是類似這樣的 CSS,幫你把所有 CSS style 以 class 命名好,之後只要引用 class 就可以產生樣式,而 Tailwind 正式最近正流行，他是 utility-first CSS 且客製化功能也很強大的一個 library。

譬如我在 react jsx 中搭配 Tailwind css 只要這樣寫,就可以給 div 具有 padding-lef 20的樣式，在 Tailwind 中 p-20的 p後面的 -1 是 1 比 0.25 rem, 所以會產生一個樣式具有 padding-left: 5rem; 的 div。

<div className="p-20"></div>

Tailwind 優點

與其他 CSS library 相比,譬如 bootstrap 會有一些 Nav 或是 Modal 的元件,會引入一些除了功能性的 CSS,會造成 CSS code 的檔案過大,且有些 CSS code 過大,另外也不用學習框架的 class 獨特命名,只要具備 style 知識,就可以快速上手 Tailwind 的 class。

https://tailwindcss.tw/

https://www.rocksolidknowledge.com/articles/switching-to-tailwind-css#:~:text=Utility-first CSS frameworks give,%2C such as margin-bottom.